<!--
  Demo Template Component

  A template for creating new CesiumJS demos
  
  Category: Basic

  Component Documentation:
  ========================

  Title: Demo Template
  Description: A template for creating new CesiumJS demos
  Features:
    - Shows how to create a basic Cesium viewer
    - Demonstrates how to add entities to the viewer
    - Provides a structure for organizing demo code
  Author: Your Name
  Date: Today's Date
-->

<template>
  <BaseCesiumViewer 
    ref="cesiumViewer" 
    
    @viewer-ready="onViewerReady"
  />
</template>

<script>
import { ref } from 'vue';
import BaseCesiumViewer from '../core/BaseCesiumViewer.vue';

// For demo-specific utilities that don't belong in the general utilities
// create a separate file like MyDemo.utils.js and import from there
// import { myDemoSpecificFunction } from './MyDemo.utils.js';

export default {
  name: 'DemoTemplate', // Change this to your demo name
  components: {
    BaseCesiumViewer
  },
  setup() {
    const cesiumViewer = ref(null);
    
    // Only define options that are specific to this demo
    // BaseCesiumViewer provides default options
    const viewerOptions = {
      // Add only demo-specific options here
      // For example:
      // animation: false,
      // timeline: false
    };

    // This function is called when the Cesium viewer is ready
    const onViewerReady = (payload) => {
      // Check if payload and viewer are valid
      if (!payload || !payload.viewer) {
        console.error('Viewer is not ready or payload is invalid');
        return;
      }
      
      // eslint-disable-next-line no-unused-vars
      const { viewer, Cesium } = payload;
      
      // TODO: Implement your demo here
      // Example:
      /*
      viewer.entities.add({
        name: 'Example Entity',
        position: Cesium.Cartesian3.fromDegrees(-75.1652, 39.9526),
        point: {
          pixelSize: 10,
          color: Cesium.Color.RED
        }
      });
      */
    };

    return {
      cesiumViewer,
      viewerOptions, // Expose viewerOptions to template
      onViewerReady
    };
  }
};
</script>

<style scoped>
/* 
  Component Styles
  Add any custom styles for your demo here
*/
</style>